<template>
    <v-card color="background" elevation="0" class="pb-2">
        <v-row dense class="mb-2">
            <v-divider class="ma-2" />
            <v-col v-if="showHot">
                <v-card elevation="5" class="hot-rank-card" rounded="lg">
                    <v-card-title class="hot-rank-title d-flex align-center">
                        <v-icon color="#ff4757" class="mr-2 rank-icon">mdi-fire</v-icon>
                        <span class="rank-title-text">热度视频排行榜</span>
                    </v-card-title>
                    <v-list class="hot-rank-list" height="350px">
                        <v-list-item 
                            v-for="(rank, n) in rankList" 
                            :key="n"
                            :title="rank.title" 
                            :to="`/?play=${rank.videoId}&n=${n}`" 
                            :active="false"
                            class="hot-rank-item"
                            :class="`rank-${n}`"
                            rounded="lg"
                            variant="text"
                        >
                            <template #prepend>
                                <div class="rank-number" :class="`rank-${n+1}-badge`">
                                    {{ n + 1 }}
                                </div>
                            </template>
                            <template #subtitle>
                                <div class="d-flex align-center mt-1">
                                    <v-icon size="small" color="#ff6b81" class="mr-1 heat-icon">mdi-trending-up</v-icon>
                                    <span class="heat-text">{{ `${rank.hotFormat} 热度` }}</span>
                                </div>
                            </template>
                        </v-list-item>
                    </v-list>
                </v-card>
            </v-col>
            <v-col v-for="(video, index) in videoList" :key="index" xs="12" sm="6" md="4" lg="3" xl="2"
                    class="video-card-col">
                <VideoCard @click="playVideo(video)" :video-info="video" class="video-card" />
            </v-col>

            <v-col cols="12" v-if="!videoList || videoList.length == 0">
                <v-card height="300px" class="ma-4 empty-state-card" :variant="'tonal'" rounded="lg">
                    <div class="empty-state-content">
                        <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-video-off</v-icon>
                        <div class="empty-state-text">{{ noDataMsg }}</div>
                    </div>
                </v-card>
            </v-col>
        </v-row>
        <v-dialog :model-value="videoDialog" fullscreen transition="dialog-bottom-transition">
            <v-card v-if="currentVideo">
                <Video :video-info="currentVideo" :close-video="() => playVideo(null)" />
            </v-card>
        </v-dialog>
    </v-card>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { apiVideoHotRank } from '../../apis/video';
import VideoCard from './card.vue';
import Video from './index.vue';
const { videoList, noDataMsg, showHot } = defineProps({
    videoList: {
        type: Object,
        default: []
    },
    noDataMsg: {
        type: String,
        default: "未找到相关视频"
    },
    showHot: {
        type: Boolean,
        default: false
    }
})
const rankList = ref([])
onMounted(() => {
    if (showHot) {
        apiVideoHotRank().then(({ data }) => {
            rankList.value = data.data.splice(0,10)
        })
    }
})
const currentVideo = ref(null)
const videoDialog = ref(false)
const playVideo = (video) => {
    videoDialog.value = false
    currentVideo.value = video
    videoDialog.value = video ? true : false
}
</script>
<style scoped>
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.video-card-col {
  animation: fadeIn 0.5s ease forwards;
  animation-delay: calc(0.05s * var(--n));
}

.video-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
}

.hot-rank-card {
  background-color: #1a1b25;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.hot-rank-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

.hot-rank-title {
  background: linear-gradient(135deg, #2c3e50, #1a1b25);
  color: #f5f5f5;
  padding: 16px;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.hot-rank-title::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { transform: translateX(-150%) skewX(-25deg); }
  50% { transform: translateX(150%) skewX(-25deg); }
  100% { transform: translateX(150%) skewX(-25deg); }
}

.rank-title-text {
  position: relative;
  z-index: 2;
}

.rank-icon {
  animation: pulse 2s infinite;
}

.hot-rank-list {
  background-color: #1a1b25 !important;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 156, 191, 0.3) rgba(255, 255, 255, 0.05);
}

.hot-rank-list::-webkit-scrollbar {
  width: 6px;
}

.hot-rank-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.hot-rank-list::-webkit-scrollbar-thumb {
  background: rgba(124, 156, 191, 0.3);
  border-radius: 10px;
}

.hot-rank-list::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 156, 191, 0.5);
}

.hot-rank-item {
  margin-bottom: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 12px;
  border-left: 3px solid transparent;
  overflow: hidden;
  position: relative;
}

.hot-rank-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: -1;
}

.hot-rank-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transform: translateX(4px);
  border-left: 3px solid #7C9CBF;
}

.hot-rank-item:hover::before {
  transform: translateX(0);
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-weight: 600;
  background-color: #2a2b3d;
  color: #e0e0e0;
  margin-right: 12px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.hot-rank-item:hover .rank-number {
  transform: scale(1.1);
}

.rank-1-badge {
  background: linear-gradient(135deg, #ff4757, #ff6b81);
  color: #ffffff;
}

.rank-2-badge {
  background: linear-gradient(135deg, #ff7f50, #ff9f7f);
  color: #ffffff;
}

.rank-3-badge {
  background: linear-gradient(135deg, #2ed573, #7bed9f);
  color: #ffffff;
}

.heat-icon {
  transition: all 0.3s ease;
}

.hot-rank-item:hover .heat-icon {
  transform: translateY(-2px);
}

.heat-text {
  color: #a5b1c2;
  font-size: 0.85rem;
}

.empty-state-card {
  background: linear-gradient(135deg, #1e1f2a, #252632);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-state-text {
  color: #a5b1c2;
  font-size: 1.2rem;
  margin-top: 16px;
}
</style>